资讯频道 → Web前端
阅读更多

1顶
0踩

Web前端

原创新闻 支付宝AR抢红包？前端轻松就破解~

2016-12-27 16:03 by 副主编 jihong10102006 评论(0) 有8967人浏览
css html github 前端

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

近期阿里搞了各LBS+AR实景的红包玩法，小伙伴们在公司里都玩疯了~

有时候为了抢一个红包，会跑到另一个地方去拍照，虽然略麻烦，但整体的互动还是很有意思的。

不过对于机智的前端童鞋来说，只需要简单的一段代码就能破解AR红包（当然成功率也不是100%）。

破解原理见《上线仅一天：支付宝AR红包惨遭技术流破解》，感谢这位设计师童鞋。

我们要做的事情其实很简单 —— 把系统自带的小横条都去掉，去掉的部分取其附近的图片内容来填充，最终得到的效果图有不小的几率会被识别为匹配成功：

对于上图中间那块区域，我们可以通过固定的轮廓对底图进行遮罩得出。

所以对于前端而言，我们可以通过这样的 DOM 结构来实现如上需求：

其中 C 和 B 其实是同一个背景（即抢红包页面的手机截图），A 是一个遮罩轮廓，会对 B 进行剪辑获得非条纹部分的图片内容。同时 B 再相对 C 进行垂直偏移，用自身被剪辑后的内容挡住 C 的条纹。

根据图片alpha通道来做遮罩的能力，我们可以使用 CSS3 的 mask-image 特性来实现，其具体应用在我之前《巧用 mask-image 实现简单进度加载界面》一文中已做了详细介绍：

本文不再赘述该 CSS3 特性。

另外还有一点小需求 —— 希望 B 和 C 的底图可以动态更换。这个我们使用 input[type=file] 组件来实现即可。

直接贴代码吧： 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            margin-top: -1500px;
            position: relative;
            overflow: hidden;
            background: #EEE;
            width: 1440px;
            height: 2110px;
        }

        #bg, #mask-bg {
            position: absolute;
            width: 1440px;
            height: 2560px;
            background-size: cover;
        }
        #mask-bg{
            top:9px;
            mask-image: url(mask.png);
            -webkit-mask-image: url(mask.png);
        }
        input {
            height: 60px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div>
    <p id="bg"></p>
    <p id="mask-bg"></p>
</div>
<input type="file">

<script>
    var input = document.querySelector('input'),
        bg = document.querySelector('#bg'),
        maskBg = document.querySelector('#mask-bg');

    input.onchange = function () {
        var src = getObjectURL(this.files[0]);
        setBg(src);

    };

    function setBg(src){
        bg.style.backgroundImage = 'url(' + src + ')';
        maskBg.style.backgroundImage = 'url(' + src + ')';
    }

    /**
     * 通过选择的文件获取其图片路径（blob）
     * @param file
     * @returns {*}
     */
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }
        return url
    }

</script>
</body>

需要了解的是，我们在 getObjectURL 方法中使用了 URL.createObjectURL 接口来为所选文件生成对应的 blob 内容的URL，再将其赋给底图的 background-image。其格式是这样的：

最终整体效果如下：

需要注意的是，这里的图片宽高值，以及遮罩图 mask.png，都是根据我的手机分辨率来定制的，所以要使用该工具的话请自行修改样式和遮罩图片。

该小工具挂在我的 github 仓库上，有需求的可以自助下载修改。
Tips：
1. 这里无法保证成功率100%，尽量选择颜色较深、没有文字出现的照片，成功率会大一点；
2. 支付宝是有防刷措施的，每天都有领取红包的数量上限，所以要通过AR红包来发家致富是走不通了（手动滑稽）；
3. 现在破解起来很轻松的一个地方是，支付宝每次生成的条纹都是固定的（条数、位置、粗度），说不好以后会对这块进行优化，进而动态生成条纹，那本文的办法就不适用了（mask.png无法适应）。不过即使那样也可以走canvas来hack。
其实阿里蛮多福利都能通过前端来hack，例如之前的《天猫双十一狂抢优惠券？机智的程序猿这么玩》，开动脑筋想一想办法经常会出来（这也是为何大公司做活动，都会谨慎地加上防刷措施的原因）。共勉~
  • 大小: 203.7 KB
  • 大小: 261.7 KB
  • 大小: 181.7 KB
  • 大小: 28.4 KB
  • 大小: 348.8 KB
  • 大小: 348.8 KB
来自: vajoy
1
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 前端轻松破解支付宝AR抢红包

    不过对于机智的前端童鞋来说，只需要简单的一段代码就能破解AR红包（当然成功率也不是100%）。破解原理见《上线仅一天：支付宝AR红包惨遭技术流破解》（https://news.cnblogs.com/n/559670/），感谢这位设计师童鞋。...

  • 【opencv】支付宝AR实景红包领取方法

    最新的支付宝10.0.0增加了AR实景红包功能。 如何不通过寻找实景去得到红包呢？ 今天早上突然想抢几个红包，于是写了个小程序   首先找到一个周围的红包，点击“按住看线索”，然后屏幕截图。 然后提取出线索区域，...

  • 前后端分离后的前端时代，使用前端技术能做哪些事？

    什么是前后端分离，要区分前端和后端，需要有个明确的界限。一般，用户可以直接看到的东西，都是属于前端的范畴，除了前端之外都属于后端了。 在传统的像ASP，JSP和PHP等开发模式中，前端是处在一个混沌的状态中，...

  • 前后端分离后的互联网时代，使用前端技术能做哪些事？

    什么是前后端分离，要区分前端和后端，需要有个明确的界限。一般，用户可以直接看到的东西，都是属于前端的范畴，除了前端之外都属于后端了。 在传统的像ASP，JSP和PHP等开发模式中，前端是处在一个混沌的状态中，...

  • 大火的前端时代，使用前端技术能实现什么？

    什么是前后端分离，要区分前端和后端，需要有个明确的界限。一般，用户可以直接看到的东西，都是属于前端的范畴，除了前端之外都属于后端了。 在传统的像ASP，JSP和PHP等开发模式中，前端是处在一个混沌的状态中，...

  • 前后端分离后的前端时代，前端技术要会做哪些事？

    一般，用户可以直接看到的东西，都是属于前端的范畴，除了前端之外都属于后端了。 2，在传统的像ASP，JSP和PHP等开发模式中，前端是处在一个混沌的状态中，可以说是没有独立的“人格”可言。 3，前端负责切图和编写...

  • 前后端分离后的前端时代

    本文从前端开发的视角，聊一聊前后端分离之后的前端开发的那些事儿。阅读全文，大约需要8分钟。  什么是前后端分离 要区分前端和后端，需要有个明确的界限。一般，用户可以直接看到的东西，都是属于...

  • 移动端开发的未来在哪里？-Tamic博客

    从去年下半年开始，就开始听到各种言论，例如 “Android 开发凉凉”、“移动端开发没出路了赶紧转行”、“要被 XXX 替代了” 等等，充分反映了大家焦虑的心态。移动端开发真的要凉凉了吗？我也经常和朋友聊起这个...

  • 天然气汽车供气系统减压装置毕业设计（cad+设计方案）.zip

    天然气汽车供气系统减压装置毕业设计（cad+设计方案）

  • PHP+SQL考勤系统安全性实现(源代码+论文+答辩PPT+指导书)

    PHP+SQL考勤系统安全性实现(源代码+论文+答辩PPT+指导书)

  • NumPy 的用途是什么

    NumPy 的用途是什么

  • 毕业设计 基于javaweb的在线答题平台

    毕业设计 基于javaweb的在线答题平台

  • 基于MATLAB的pca人脸识别.zip

    基于MATLAB的pca人脸识别.zip

  • 课设毕设基于SSM的信息类课程教学知识管理系统LW+源码可运行.zip

    课设毕设基于SSM的系统源码可运行

  • JAVAWML信息查询与后端信息发布系统实现-WML信息查询设计(源代码+LW).zip

    JAVAWML信息查询与后端信息发布系统实现——WML信息查询设计(源代码+LW)

  • 毕业设计[整站程序]情感家园站 v3.0 For 个人版_qgweb30fp.zip

    毕业设计[整站程序]情感家园站 v3.0 For 个人版_qgweb30fp.zip

  • 熊猫脚本助手V1.8.zip

    可以自动刷课，执行重复的脚本工作，内有详细操作教程。支持WIN7---WIN10系统。

  • Java项目之实验室计算机故障报修系统（源码）

    Java项目之实验室计算机故障报修系统（源码） 开发语言：Java 框架：ssm 技术：JSP JDK版本：JDK1.8 服务器：tomcat7 数据库：mysql 5.7（一定要5.7版本） 数据库工具：Navicat11 开发软件：eclipse/myeclipse/idea Maven包：Maven3.3.9

  • 使用hapi框架搭建 基于协同过滤的美食推荐系统——后台.zip

    协同过滤算法（Collaborative Filtering）是一种经典的推荐算法，其基本原理是“协同大家的反馈、评价和意见，一起对海量的信息进行过滤，从中筛选出用户可能感兴趣的信息”。它主要依赖于用户和物品之间的行为关系进行推荐。 协同过滤算法主要分为两类： 基于物品的协同过滤算法：给用户推荐与他之前喜欢的物品相似的物品。 基于用户的协同过滤算法：给用户推荐与他兴趣相似的用户喜欢的物品。 协同过滤算法的优点包括： 无需事先对商品或用户进行分类或标注，适用于各种类型的数据。 算法简单易懂，容易实现和部署。 推荐结果准确性较高，能够为用户提供个性化的推荐服务。 然而，协同过滤算法也存在一些缺点： 对数据量和数据质量要求较高，需要大量的历史数据和较高的数据质量。 容易受到“冷启动”问题的影响，即对新用户或新商品的推荐效果较差。 存在“同质化”问题，即推荐结果容易出现重复或相似的情况。 协同过滤算法在多个场景中有广泛的应用，如电商推荐系统、社交网络推荐和视频推荐系统等。在这些场景中，协同过滤算法可以根据用户的历史行为数据，推荐与用户兴趣相似的商品、用户或内容，从而提高用户的购买转化率、活跃度和社交体验。 未来，协同过滤算法的发展方向可能是结合其他推荐算法形成混合推荐系统，以充分发挥各算法的优势。

Global site tag (gtag.js) - Google Analytics